<!DOCTYPE html>
<html lang="en">
<head>
  <title>Home</title>
  <!-- Meta tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content=""/>
  <script>
	 addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); }
  </script>
  <!-- Meta tags -->
  <!--stylesheets-->
  <link href="css/style.css" rel='stylesheet' type='text/css' media="all">
  <!--//style sheet end here-->
  <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
</head>
<body>
  <div class="mid-class">
	 <div class="art-right-w3ls">
		<h2>Sign In and Sign Up</h2>
		 	<div class="main">
				<div class="form-left-to-w3l">
					<input type="text" name="name" id="login_username" placeholder="Username" required="required">
				</div>
				<div class="form-left-to-w3l ">
					<input type="password" name="password" id="login_password" placeholder="Password" required="">
					<div class="clear"></div>
				</div>
				<div class="form-left-to-w3l">
				   <input type="text" name="name" id="login_vaildateCode" placeholder="vaildateCode" required="">
				   <div><img src="refreshCode.do"></div>
				</div>
			</div>
			<div class="left-side-forget">
				<input type="checkbox" class="checked">
				<span class="remenber-me">Remember me </span>
			</div>
			<div class="right-side-forget">
				<a href="#" class="for">Forgot password...?</a>
			</div>
			<div class="clear"></div>
			<div class="btnn">
				<button type="submit" onclick="Sign_in()">Sign In</button>
			</div>
			<div class="w3layouts_more-buttn">
				<h3>
			  		<a href="#content1">Sign Up</a>
				</h3>
			</div>
		<!-- popup-->
		<div id="content1" class="popup-effect">
		   <div class="popup">
			  <!--login form-->
			  <div class="letter-w3ls">
				  <div id="username_hint" style="color: red"></div>
				  <div class="form-left-to-w3l">
				   	<input type="text" name="name" id="register_username" placeholder="Username" required="" onblur="check()">
					<!-- 密码错误提示 -->
					<div style="color: red" id="hint"></div>
				</div>
				 <div class="form-left-to-w3l">
					 <input type="password" name="password" id="register_password" placeholder="Password" onblur="check()"required="">
				 </div>
				 <div class="form-left-to-w3l">
					 <input type="password" name="password1" id="register_repassword" placeholder="Confirm Password" onblur="check()" required="">
				 </div>
				<div class="form-left-to-w3l">
				   <input type="text" name="VaildateCode" id="register_vaildateCode" placeholder="validateCode" required="">
				</div>
				 <div class="form-left-to-w3l margin-zero"><img src="refreshCode.do"> </div>
				<div class="btnn">
				   <button type="submit" onclick="Sign_up()">Sign Up</button>
				   <br>
				</div>
				 <div class="clear"></div>
			  </div>
			  <!--//login form-->
			  <a class="close" href="#">&times;</a>
		   </div>
		</div>
		<!-- //popup -->
	 </div>
	 <div class="art-left-w3ls">
		<h1 class="header-w3ls">
		   Gaze sign up & login Form
		</h1>
	 </div>
  </div>
  <footer class="bottem-wthree-footer">
	 <p>Copyright &copy; 2019.Company name All rights reserved</p>
  </footer>

	<script type="text/javascript">
		function Sign_in() {
			//获取输入的用户名和密码
			var username = document.getElementById("login_username").value;
			var password = document.getElementById("login_password").value;
			var vaildateCode = document.getElementById("login_vaildateCode").value;

			//创建ajax对象
			var ajax;
			if (window.XMLHttpRequest)
			{
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				ajax=new XMLHttpRequest();
			}
			else
			{
				// IE6, IE5 浏览器执行代码
				ajax=new ActiveXObject("Microsoft.XMLHTTP");
			}
			ajax.onreadystatechange = function () {
				if(ajax.readyState===4 && ajax.status===200){
					if(ajax.responseText =='isLoginSuccess'){
						window.location.assign("index.html");
					}else{
						window.location.assign("error.html?errorMessage="+ajax.responseText);
					}
				}
			}
			ajax.open("get","/BTS/login.do?" +
					"uname="+username+"&pwd="+password+"&VaildateCode="+vaildateCode);
			ajax.send(null);
		}
	</script>

	<script type="text/javascript">
		/**
		 * @return {boolean}
		 */
		function Sign_up() {
			if(!check()){
				return false;
			}
			//获取输入的用户名和密码
			var username = document.getElementById("register_username").value;
			var password = document.getElementById("register_password").value;
			var vaildateCode = document.getElementById("register_vaildateCode").value;

			//创建ajax对象
			var ajax;
			if (window.XMLHttpRequest)
			{
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				ajax=new XMLHttpRequest();
			}
			else
			{
				// IE6, IE5 浏览器执行代码
				ajax=new ActiveXObject("Microsoft.XMLHTTP");
			}
			ajax.onreadystatechange = function () {
				if(ajax.readyState===4 && ajax.status===200){
					console.log(ajax.responseText);
					var response = ajax.responseText;
					if(response =='isRegisterSuccess'){
						window.location.assign("index.html");
					}else{
						window.location.assign("error.html?errorMessage="+ajax.responseText)
					}
				}
			}
			ajax.open("get","/BTS/register.do?" +
					"uname="+username+"&pwd="+password+"&VaildateCode="+vaildateCode);
			ajax.send(null);
		}
	</script>
	<script type="text/javascript">
		function check() {
			var username = document.getElementById("register_username").value;
			var password = document.getElementById("register_password").value;
			var repassword = document.getElementById("register_repassword").value;

			var hint = document.getElementById("hint");

			var test = 0;
			var regExp = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
			var username_hint = document.getElementById("username_hint");
			if(regExp.test(username)){
				username_hint.innerHTML = "";
				test++;
			}else {
				username_hint.innerHTML = "字母开头，允许5-16字节，允许字母数字下划线";
			}
			if(password.size<=6){
				test++;
			}
			//检查两次输入密码是否一致
			if(password==repassword){
				hint.innerHTML = "";
				test++;
				return true;
			}else{
				hint.innerHTML = "两次输入的密码不一致";
				return false;
			}
			//通过所有检验test值为4
			if(test==3){
				return true;
			}else{
				return false;
			}
		}
	</script>
</body>
</html>